<template>
  <div>
    <h1>Vue Life Line</h1>
    <button @click="count++">更新数据</button>
    <button @click="show = false">卸载组件</button>
    <p>count: {{ count }}</p>
    <div id="warp"></div>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'
import { ref } from 'vue'

// state
const count = ref(0)
const show = ref(true)

// 简单的日志输出函数，插入 DOM 节点
const logDom = (msg) => {
  const el = document.createElement('h3')
  el.textContent = msg
  document.getElementById('warp')?.appendChild(el)
}

// setup 阶段
logDom('setup 阶段')

// 生命周期钩子
onBeforeMount(() => logDom('onBeforeMount 生命周期'))
onMounted(() => logDom('onMounted 生命周期'))

onBeforeUpdate(() => logDom('onBeforeUpdate 生命周期'))
onUpdated(() => logDom('onUpdated 生命周期'))

onBeforeUnmount(() => logDom('onBeforeUnmount 生命周期'))
onUnmounted(() => logDom('onUnmounted 生命周期'))
</script>

<style scoped>
#warp {
  margin-top: 16px;
  padding: 8px;
  background: #f5f5f5;
  border: 1px solid #ccc;
}
h3 {
  font-weight: normal;
  margin: 4px 0;
}
</style>
